<template>
  <div class="regist-view">
    <div class="regist-view__body">
      <div class="forget-view__body-title text-13px text-text-3 font-700">
        {{ $t("sign_up") }}
      </div>
      <Tabs :options="options" v-model:value="value" />

      <van-field :placeholder="$t('placeholder_1')" clearable v-model="registerData.account" type="text"
        autocomplete="off" />
      <van-field v-model="registerData.password" :placeholder="$t('placeholder_2')"
        :type="!showPassword ? 'text' : 'password'" @click-right-icon="clickRightIcon" autocomplete="off">
        <template #right-icon>
          <svg class="h-12px w-12px fill-text-6" v-if="showPassword">
            <use xlink:href="@/assets/symbol-defs.ef6a79c4.svg#icon_View"></use>
          </svg>
          <svg class="h-12px w-12px fill-text-6" v-else>
            <use xlink:href="@/assets/symbol-defs.ef6a79c4.svg#icon_Hide"></use>
          </svg>
        </template>
      </van-field>
      <BcValidatePassword :status="checkPasswordStrength(value2)" />
      <div class="signUp">
        <van-button type="primary" size="small" @click="signUp" :disabled="signUpDisabled">Sign Up</van-button>
      </div>
      <div class="py-12px">
        <span class="text-11px text-text-4">{{ $t("already") }}</span>
        <span class="text-13px text-text-5 ml-4px font-700 underline" @click="$router.push('/login')">{{ $t("sign_in")
        }}</span>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import Tabs from "@/components/tabs/index.vue";
import BcValidatePassword from "@/components/bc-validate-password/index.vue";
import { reactive,computed } from "vue";
import { showToast } from 'vant';
import { register } from "../../api/login"
import { checkPasswordStrength } from "@/utils/index";
import { useI18n } from "vue-i18n";

const { t } = useI18n();
const $t = key => {
  return t("regist." + key);
};

const value = ref("Email");
console.log("测试");
const options = ref([
  { label: "Email", value: "Email" },
  { label: "Phone Number", value: "Phone" }
]);

const value1 = ref("");
const value2 = ref("");
const showPassword = ref(false);
const registerData = reactive({
  device: '',
  account: '',
  password: ''
})

const clickRightIcon = () => {
  showPassword.value = !showPassword.value;
};
const signUp = async () => {
  // const res = await register(registerData)
  const { account } = registerData
  var reg = new RegExp(
    /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
  )
  if (!reg.test(account)) {
    showToast('请输入正确的邮箱地址');
    return false
  }
  await register(registerData)
  // const res = await register(registerData)

}
const signUpDisabled = computed(() => {
  const { account, password } = registerData
  if (!account || !account.trim() || !password || !password.trim()) {
    return true
  }
  return false
})
</script>
<style lang="less" scoped>
.regist-view {
  &__body {
    :deep(.tab-bar) {
      .bar-item {
        &:not(.bar-item--active) {
          border-bottom: none !important;
        }
      }
    }
  }
}
.signUp {
  width: 100%;
  text-align: center;
  margin-top: 3%;
}
</style>
